import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Checkbox, Modal, Toast, ActivityIndicator } from 'antd-mobile';

import 'antd-mobile/lib/checkbox/style/index.css';
import 'antd-mobile/lib/modal/style/index.css';
import 'antd-mobile/lib/toast/style/index.css';
import 'antd-mobile/lib/activity-indicator/style/index.css';
import '../static/styles/lxr-item.css';

import { post } from '../api/getData';

const CheckboxItem = Checkbox.CheckboxItem;
const alert = Modal.alert;

let cacheLxr = [];

class LxrItem extends Component {
    constructor(props){
        super(props);

        this.state = {
            checked: false,
            animating: false
        }
        cacheLxr = window.localStorage.getItem('lxr-select');
        if(!cacheLxr){
            cacheLxr = [];
        }else{
            cacheLxr = JSON.parse(cacheLxr);
            for (var i = 0; i < cacheLxr.length; i++) {
                if(cacheLxr[i].id === this.props.data.id){
                    this.state = {
                        checked: true
                    }
                }
            }
        }
    }

    change(){
        if(!this.state.checked){
            cacheLxr.push(this.props.data);
            window.localStorage.setItem('lxr-select', JSON.stringify(cacheLxr));
            this.setState({
                checked: true
            })
        }else{
            this.setState({
                checked: false
            })
            for (var i = 0; i < cacheLxr.length; i++) {
                if(cacheLxr[i].id === this.props.data.id){
                    cacheLxr.splice(i, 1);
                }
            }
            window.localStorage.setItem('lxr-select', JSON.stringify(cacheLxr));
        }
    }

    edit(){
        window.location.href = '/lxr/add?id='+this.props.data.id;
    }

    delete(){
        let __this = this;
        alert("删除联系人", '确定删除联系人'+`${this.props.data.real_name}`+'?', [
            { text: '取消', onPress: () => {
                console.log(111);
            }},
            { text: '确定', onPress: () => {
                __this.setState({
                    animating:true
                });
                let formData = new FormData();
                formData.append('personal_id', __this.props.data.id);
                post('/api/activity/lxr/delete', formData, function(error, data){
                    __this.setState({
                        animating:false
                    });
                    if(error === null){
                        Toast.success('删除成功', 1);
                        window.location.reload();
                    }else{
                        Toast.fail(error, 1);
                    }
                });
            }},
        ])
    }
    render() {
        return (
            <div className='lxr'>
                {
                    this.state.animating
                    ?
                    <ActivityIndicator
                        toast
                        text="Loading..."
                    />
                    :
                    ''
                }
                <div className='lxr-content'>
                    <div>真实姓名: {this.props.data.real_name}</div>
                    <div>联系方式: {this.props.data.mobile}</div>
                    <div>身份证号: {this.props.data.idcard}</div>
                    {
                        this.props.edit
                        ?
                        <div className='lxr-edit'>
                            <div onClick={() => this.edit()}>修改</div>
                            <div onClick={() => this.delete()}>删除</div>
                        </div>
                        :
                        ''
                    }
                </div>
                {
                    this.props.show === 'gx'
                    ?
                    <div className='lxr-gx'>
                        <div>{this.props.data.relation}</div>
                    </div>
                    :
                    <div className='lxr-do'>
                        {
                            this.state.checked === true
                            ?
                            <CheckboxItem checked={true} onChange={() => this.change()} className='enroll-checkbox-small nb nmt'></CheckboxItem>
                            :
                            <CheckboxItem checked={false} onChange={() => this.change()} className='enroll-checkbox-small nb nmt'></CheckboxItem>
                        }
                    </div>
                }
            </div>
        );
    }
}

export default LxrItem;
